@import 'colors';

$colophon-height: 50px; // wpcomColophon element at the bottom

.jetpack-connect__main:not( .is-woocommerce ),
.layout.is-section-jetpack-connect:not( .is-add-site-page ):not( .is-jetpack-mobile-flow ):not( .is-jetpack-woocommerce-flow ):not( .is-jetpack-woo-dna-flow ) {
	@include jetpack-connect-colors();
}

.layout.is-jetpack-woocommerce-flow,
.layout.is-jetpack-woo-dna-flow {
	@include woocommerce-colors();
}

.is-section-jetpack-connect,
.is-section-purchase-product {

	.layout__content {
		position: static;
		// Adjust the padding as we no longer
		// show the masterbar.
		padding-top: 48px;

		& > .banner {
			max-width: 600px;
		}
	}

	&.layout {
		position: relative;
		min-height: calc( 100% - #{$colophon-height} );
		padding-bottom: $colophon-height;
	}

	// Hide the masterbar for real
	.masterbar {
		display: none;
	}

	// Move the back button up top
	.back-button {
		top: 0;
	}
}

.jetpack-connect__main.main {
	max-width: 400px;

	.formatted-header {
		margin-bottom: 16px;
	}

	&.is-mobile-app-flow {
		.logged-out-form__links {
			display: none;
		}

		.jetpack-connect__back-button {
			display: none;
		}
	}
}

.jetpack-connect__step {
	margin: 0 auto;
	max-width: 600px;
	text-align: initial;

	input[type='radio']:focus {
		box-shadow: 0 0 0 2px var( --studio-jetpack-green-20 );
	}

	.wpcom-colophon {
		position: absolute;
			bottom: 0;
			left: 0;
		width: 100%;
		height: $colophon-height;
	}

	.site-topic__content {
		padding-bottom: 2px;

		.form-fieldset {
			position: relative;
		}

		input[type='text'] {
			border-color: var( --studio-jetpack-green-50 );
		}

		@include breakpoint-deprecated( '<660px' ) {
			.button {
				font-size: $font-body;
				padding-top: 12px;
				padding-bottom: 14px;
			}
		}
	}
}

.jetpack-connect__main-logo {
	text-align: center;

	@include breakpoint-deprecated( '<660px' ) {
		margin-top: 20px;
	}
}

.jetpack-connect__main.is-wide {
	max-width: 100%;
	text-align: center;

	.jetpack-connect__happychat-button {
		text-align: center;
	}
}

.jetpack-connect__main-error {
	.logged-out-form__links {
		margin-top: 15px;
		text-align: center;

		.jetpack-connect__happychat-button {
			text-align: center;
		}
	}
}

.jetpack-connect__site-url-entry-container,
.purchase-product__site-url-entry-container {
	margin: 0 auto;
	max-width: 400px;

	.formatted-header {
		text-align: center;
	}
}


.jetpack-connect__wp-admin-dialog.dialog.card {
	max-width: 400px;

	.jetpack-connect__install-wp-admin {
		width: 400px;
		height: 294px;
	}
}

.jetpack-connect__site-url-input-container,
.purchase-product__site-url-input-container,
.example-components__site-url-input-container {
	.jetpack-connect__site-address-container,
	.example-components__site-address-container {
		position: relative;

		.gridicons-user,
		.gridicons-globe {
			position: absolute;
			top: 8px;
			left: 8px;
			color: var( --color-neutral-10 );
		}

		.form-text-input {
			padding-left: 40px;
		}

		.spinner {
			position: absolute;
			right: 8px;
			top: 10px;
		}

		.sites-dropdown__wrapper {
			width: 100%;
      margin-top: 20px;
		}
	}

	.button {
		width: 100%;
		margin-top: 16px;
		word-wrap: nowrap;
	}
}

.jetpack-connect__site-address {
		padding: 0 24px 24px;
		margin: 0 -24px;
		border-bottom: 1px solid var( --color-border-subtle );
		display: flex;
}

.jetpack-connect__globe {
		width: 32px;
		height: 28px;
		margin-top: -4px;
		background-color: var( --color-neutral );
		margin-right: 8px;
		padding-top: 4px;
		text-align: center;

		.gridicons-globe {
			fill: var( --color-neutral-0 );
		}
}
.jetpack-connect__wordpress-logo {
	margin: 32px auto;
	text-align: center;

	.wordpress-logo {
		margin: 0;
		fill: var( --color-neutral );
	}
}

.jetpack-connect__note {
	font-size: $font-body-extra-small;
	text-align: center;
}

.jetpack-connect__authorize-form {
	.jetpack-connect__authorize-form-header {
		text-align: center;
	}
}

.jetpack-connect__logged-in-form {
	.jetpack-connect__logged-in-form-user-text {
		margin-bottom: 0;
		text-align: center;
	}

	.gravatar {
		display: block;
		margin: 0 auto 8px;
	}

	.button {
		width: 100%;
	}
}

.jetpack-connect__back-button {
	margin-top: 16px;
}

.jetpack-connect__install {
	margin-bottom: 16px;
}

.jetpack-connect__install-steps {
	display: flex;
	justify-content: center;
	flex-direction: column;
	flex-wrap: wrap;

	@include breakpoint-deprecated( '>660px' ) {
		flex-direction: row;
	}
}

.jetpack-connect__install-step {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-width: 320px;

	@include breakpoint-deprecated( '>480px' ) {
		max-width: 360px;
	}

	@include breakpoint-deprecated( '>660px' ) {
		margin: 0 8px 16px;
	}
}

.jetpack-connect__install-step-title {
	font-size: $font-title-small;
}

.jetpack-connect__install-step-text {
	color: var( --color-neutral-light );
	font-size: $font-body-extra-small;
	margin: 8px 0 16px;
	flex-grow: 2;
}

.example-components__main {
	cursor: pointer;
	width: 100%;

	&:hover > div {
		box-shadow: 0 0 0 1px var( --color-neutral-light ), 0 2px 4px var( --color-neutral-10 );
	}
}

.example-components__browser-chrome {
	padding: 8px;
	background-color: var( --color-neutral-0 );
	border-radius: 8px 8px 0 0;
}

.example-components__browser-chrome-dots {
	line-height: 0;
	margin-bottom: 8px;
}

.example-components__browser-chrome-dot {
	display: inline-block;
	margin-right: 8px;
	background-color: var( --color-neutral-20 );
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

.example-components__content {
	position: relative;
	margin: 0;
	line-height: 0;
	box-shadow: 0 0 0 1px rgba( var( --color-neutral-10-rgb ), 0.5 ), 0 1px 2px var( --color-neutral-0 );
}

.example-components__install-plugin-header {
	width: 100%;
	padding-bottom: 12%;
	background-color: var( --studio-jetpack-green-30 );
}

.example-components__install-plugin-body {
	width: 100%;
	padding-bottom: 38%;
}

.example-components__install-plugin-footer {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 9px 16px;
	text-align: right;
	background-color: var( --color-neutral-0 );
}

.example-components__install-plugin-footer-button {
	display: inline-block;
	font-size: $font-body-extra-small;
	padding: 7px 14px;
	line-height: 1;
	color: var( --color-text-inverted );
	background-color: var( --color-wp-admin-button-background ); // wp-admin button blue
	border: 1px solid var( --color-wp-admin-button-border );
	border-radius: 3px;
}

.example-components__activate-jetpack {
	background-color: var( --color-neutral-0 );
}

.example-components__connect-jetpack {
	background-color: var( --color-neutral-0 );
}

.example-components__content-wp-admin-masterbar {
	width: 100%;
	padding-bottom: 6%;
	background-color: var( --color-neutral-90 );
}

.example-components__content-wp-admin-sidebar {
	display: inline-block;
	width: 15%;
	padding-bottom: 44%;
	line-height: 0;
	background-color: var( --color-neutral-90 );
}

.example-components__content-wp-admin-main {
	display: inline-block;
	vertical-align: top;
	width: 85%;
	line-height: 1.5;
}

.example-components__connect-jetpack {
	.example-components__content-wp-admin-plugin-name {
		font-size: $font-body-small;
		margin-bottom: 8px;
	}

	.example-components__content-wp-admin-connect-banner {
		margin: 10px;
		padding: 10px 10px 12px;
		background-color: var( --color-surface );
	}

	.example-components__content-wp-admin-connect-button {
		display: inline-block;
		font-size: $font-body-extra-small;
		padding: 7px 14px;
		line-height: 1;
		color: var( --color-text-inverted );
		border-radius: 3px;
		background-color: var( --studio-jetpack-green-30 );
		border: 1px solid var( --studio-jetpack-green-40 );
		border-width: 1px 1px 2px;
	}
}

.example-components__connect-jetpack.is-legacy {
	.example-components__content-wp-admin-connect-banner {
		margin: 10px;
		padding: 12px 10px 16px;
		text-align: right;
		background-color: var( --studio-jetpack-green-20 );
		border-left: 0;
	}

	.example-components__content-wp-admin-connect-button {
		display: inline-block;
		font-size: $font-body-extra-small;
		line-height: 1;
		padding: 11px 10px;
		color: var( --color-text-inverted );
		background-color: var( --studio-jetpack-green-40 );
		border-color: var( --studio-jetpack-green-40 );
		border-radius: 4px;
		box-shadow: 0 2px 3px 0 rgba( var( --color-neutral-100 ), 0.2 ),
		            0 4px 0 0 var( --studio-jetpack-green-60 );
	}
}

.example-components__content-wp-admin-plugin-card {
	margin: 10px;
	padding: 12px 10px;
	background-color: var( --color-surface );
}

.example-components__content-wp-admin-plugin-name {
	font-size: $font-body-extra-small;
}

.example-components__content-wp-admin-plugin-activate-link {
	font-size: $font-body-extra-small;
	color: var( --studio-blue-50 );
}

.example-components__content-wp-admin-activate-view {
	margin: 10px;
}

.example-components__content-wp-admin-activate-link {
	font-size: $font-body-extra-small;
	display: inline-block;
	padding: 7px 14px;
	line-height: 1;
	color: var( --color-text-inverted );
	background-color: var( --color-wp-admin-button-background ); // wp-admin button blue
	border: 1px solid var( --color-wp-admin-button-border );
	border-radius: 3px;
}

.example-components__site-url-input-container
	.example-components__site-address-container
	.example-components__browser-chrome-url {
	height: 40px;
	font-size: $font-body-extra-small;
	color: var( --color-neutral-light );
}

.jetpack-connect__sso-user-profile {
	margin-bottom: 16px;
}

.jetpack-connect__sso-user-profile .gravatar {
	display: block;
	margin: 0 auto 16px;
}

.jetpack-connect__sso-log-in-as {
	font-family: $sans;
	font-size: $font-title-small;
	text-align: center;
}

.jetpack-connect__sso-display-name {
	font-family: $serif;
}

.jetpack-connect__sso-user-email {
	color: var( --color-neutral-20 );
	font-weight: 400;
	text-align: center;
}

.jetpack-connect__sso-actions .button {
	display: block;
	text-align: center;
	width: 100%;
}

.jetpack-connect__logged-in-form-loading {
	text-align: center;

	span {
		animation: loading-fade 1.6s ease-in-out infinite;
		display: block;
	}

	.spinner {
		display: inline-block;
		margin-top: 8px;
	}
}

.jetpack-connect__tos-link {
	font-size: $font-body-extra-small;
	margin: 0 0 16px;
	text-align: center;
}

.jetpack-connect__tos-link-text {
	white-space: nowrap;
}

.jetpack-connect__connect-button-card {
	background: var( --color-neutral-0 );
	border-top: 1px solid var( --color-neutral-0 );
	box-shadow: none;
	margin: 16px -16px -16px;
	padding: 16px;

	@include breakpoint-deprecated( '>480px' ) {
		margin: 24px -24px -24px;
		padding: 24px;
	}

	.button.is-primary {
		margin: 0;
	}
}

.jetpack-connect__site.card {
	padding: 0;
}

.jetpack-connect__site.card,
.jetpack-connect__logged-in-card.card {
	max-width: 360px;
	margin: 0 auto 16px;
	border-radius: 3px;
	box-shadow: 0 5px 5px -3px rgba( var( --color-neutral-100 ), 0.2 ),
	            0 8px 10px 1px rgba( var( --color-neutral-100 ), 0.14 ),
	            3px 14px 2px rgba( var( --color-neutral-100 ), 0.12 );
}

.jetpack-connect__sso-terms-dialog {
	max-height: 70vh;
	overflow-y: auto;
}

.jetpack-connect__sso-shared-details-table {
	border-collapse: separate;
}

.jetpack-connect__sso-shared-detail-row {
	margin-bottom: 16px;

	&:last-child {
		margin-bottom: 0;
	}
}

.jetpack-connect__sso-shared-detail-label {
	font-weight: 600;
}

.jetpack-connect__sso-shared-detail-value {
	padding-left: 16px;
}

.jetpack-connect__sso-shared-detail-label,
.jetpack-connect__sso-shared-detail-value {
	padding-bottom: 8px;
}

@include breakpoint-deprecated( '<480px' ) {
	.jetpack-connect__sso-shared-detail-label,
	.jetpack-connect__sso-shared-detail-value {
		display: block;
	}

	.jetpack-connect__sso-shared-detail-label {
		padding-bottom: 0;
	}

	.jetpack-connect__sso-shared-detail-value {
		padding-left: 0;
	}
}

.jetpack-connect__sso-placeholder {
	@include placeholder( --color-neutral-10 );
	background-color: transparent;
}

.jetpack-connect__sso-placeholder a {
	color: transparent;
}

.jetpack-connect__sso .email-verification-gate .notice {
	margin-bottom: 0;
}

.jetpack-connect__sso .email-verification-gate .notice__text {
	word-wrap: break-word;
	word-break: break-word;
}

.jetpack-connect__error-details {
	margin-bottom: 16px;
}

.jetpack-connect__happychat-button {
	background: none;
	border: none;
	color: var( --color-neutral-50 );
	font-weight: normal;
	padding: 16px 24px;
	width: 100%;

	&:hover {
		color: var( --color-primary );
	}
}

.jetpack-connect__plans {
	.plan-features__header-figure {
		height: 32px;
		width: 32px;
	}

	.plan-features__header-timeframe {
		height: 20px;
		margin-top: 11px;
	}

	.plan-features .plan-price.is-original {
		align-self: center;
		margin-top: 6px;
	}

	.plan-features .plan-price.is-original .plan-price__currency-symbol,
	.plan-features .plan-price.is-original .plan-price__fraction {
		font-size: 8px;
	}

	.plan-features .plan-price.is-discounted {
		display: block;
		margin-right: 0;
		font-size: 24px;
	}

	.plan-pill {
		left: 50%;
		transform: translateX( -50% );
	}

	.formatted-header,
	.formatted-header.is-without-subhead {
		margin-bottom: 8px;
	}

	.formatted-header a {
		color: var( --color-neutral-20 );
		text-decoration: underline;

		&:hover,
		&:focus {
			color: var( --color-primary-20 );
			text-decoration: underline;
		}
	}

	.jetpack-connect__happychat-button {
		text-align: center;
	}

	.plans-skip-button {
		margin-bottom: 32px;
	}
}

.jetpack-connect__plans.placeholder {
	.placeholder-text,
	.jetpack-connect-plans-placeholder__plans-content {
		@include placeholder();
	}
	.jetpack-connect-plans-placeholder__plans-content {
		min-height: 400px;
	}

	.plan-features--signup .plan-price.is-original::before {
		border-top: 0;
	}

	.plan-features__actions-buttons {
		margin-top: 16px;
	}

	.plan-features__item {
		.placeholder-text {
			margin: 0 auto;
		}
	}
}

.jetpack-connect__hide-plan-icons {
	.jetpack-connect__plans {
		.plans-wrapper {
			padding-bottom: 0;
		}

		.plan-features__graphic {
			display: none;
		}
	}
}

.jetpack-connect__credentials-submit {
	transition: none;

	&.is-error,
	&[type='password'] {
		margin-bottom: 0;
	}

	&.is-primary {
		background-color: var( --studio-jetpack-green-30 );
		border-color: var( --studio-jetpack-green-50 );
	}
}

.jetpack-connect__password-container {
	position: relative;
	margin-bottom: 22px;
	margin-top: 22px;

	.spinner {
		z-index: z-index(
			'root',
			'.jetpack-connect__creds-form-footer .jetpack-connect__creds-form-spinner'
		);
	}
}

.jetpack-connect__creds-form-footer {
	.button {
		margin-top: 22px;
	}
}

.jetpack-connect__password-form {
	position: relative;

	.gridicons-lock {
		position: absolute;
		z-index: z-index( 'root', '.jetpack-connect__password-form .gridicon' );
		left: 8px;
		top: 7px;
		fill: var( --color-neutral-10 );
	}
}

.jetpack-connect__password-form-input {
	&[type='password'] {
		padding-left: 40px;
	}
}

.jetpack-connect__creds-form-spinner {
	margin-top: 0;
	margin-bottom: -20px;
}

.jetpack-connect__navigation {
	text-align: center;
}

.layout.has-chat.is-section-jetpack-connect:not( .is-group-editor ):not( .is-section-theme ):not( .is-group-reader )
	.layout__content {
	@include breakpoint-deprecated( '>1040px' ) {
		padding-left: 32px;
		padding-right: 319px;
	}
}

.jetpack-connect__plan-info {
	text-align: center;
	max-width: 500px;
	margin-top: 40px;
	padding-top: 40px;
	padding-bottom: 40px;
}

.jetpack-connect__plan-info-illustration {
	max-width: 200px;
}

.jetpack-connect__plan-info-buttons {
	.button + .button {
		margin-left: 10px;
	}
}

.jetpack-connect__connect-button {
	text-align: center;
}

/**
 * Onboarding styles
 **/
.layout.is-section-jetpack-connect:not( .is-add-site-page ):not( .is-jetpack-mobile-flow ),
.layout.is-section-purchase-product {
	background-color: var( --color-jetpack-onboarding-background );

	&.layout {
		position: relative;
		min-height: calc( 100% - #{$colophon-height} );
		padding-bottom: $colophon-height;
	}

	.formatted-header {
		color: var( --color-jetpack-onboarding-text );
	}

	.jetpack-logo__text,
	.wpcom-colophon path {
		fill: var( --color-jetpack-onboarding-text );
	}

	.formatted-header__subtitle,
	.payment-methods,
	.jetpack-connect__help-button {
		color: var( --color-neutral-10 );
	}

	.site__title::after,
	.site__domain::after {
		right: 3px;
	}

	.site-type__option-label {
		color: var( --color-text );
	}

	.jetpack-connect__plan-info {

		.formatted-header {
			color: var( --color-text );
		}

		.formatted-header__subtitle {
			color: var( --color-text-subtle );
		}
	}

	.jetpack-connect__site-address-container input:focus,
	.logged-out-form input:focus {
		border-color: var( --color-accent );
		box-shadow: 0 0 0 2px var( --color-accent-light );
	}

	.jetpack-connect__tos-link a,
	.signup-form__terms-of-service-link a,
	.form-input-validation a {
		color: var( --color-accent-dark );

		&:hover,
		&:focus {
			color: var( --color-accent );
		}
	}

	.logged-out-form__links a,
	.logged-out-form__link-item,
	.jetpack-connect__back-button,
	.jetpack-connect__skip-button .button {
		color: var( --color-neutral-20 );
		border-bottom-color: var( --color-neutral-70 );

		&:hover,
		&:focus {
			color: var( --color-primary-20 );
		}
	}

	.jetpack-connect__skip-button .button {
		&:focus {
			box-shadow: 0 0 0 transparent;
		}
	}

	.plan-features__table-item,
	.plan-features--signup .plan-features__row:last-of-type .plan-features__table-item {
		border: none;
	}

	.plan-features__item-checkmark {
		fill: var( --color-accent-dark );
	}

	.plan-features__item-title a {
		color: var( --color-accent-dark );

		&:hover,
		&:focus {
			color: var( --color-accent );
		}
	}

	.payment-logo.is-paypal {
		width: 64px;
		background-color: var( --color-surface );
		background-size: 84%;
		background-position: 50% 45%;
		border-radius: 1px;
	}

	.payment-logo.is-apple-pay {
		height: 22px;
		background-size: 34px auto;
		width: 34px;
		margin-top: 0;
	}

	.jetpack-connect__main-error .empty-content {
		padding-bottom: 24px;
		background-color: var( --color-surface );
		border-radius: 3px;
	}

	.site-topic__content .form-fieldset {
		position: relative;
	}

	/** WooCommerce Onboarding Styles **/
	&.is-jetpack-woocommerce-flow, &.is-jetpack-woo-dna-flow {
		background-color: var( --color-woocommerce-onboarding-background );

		.jetpack-connect__main-logo {
			text-align: center;
			border-bottom: 1px solid var( --color-neutral-50 );
			position: absolute;
			width: 100%;
			left: 0;
			top: 0;
			height: 56px;

			svg > g {
				transform: translateX( 25% );
			}

			@include breakpoint-deprecated( '<660px' ) {
				margin-top: 0;
			}
		}

		.jetpack-header {
			margin: 0;
			text-align: center;
			margin-right: auto;
			margin-left: auto;
			padding-left: 0;
			display: block;
			height: 56px;
			border-bottom: 1px solid var( --color-woocommerce-header-border );
			background: var( --color-surface );

			svg {
				margin-top: 15px;
			}
		}

		.formatted-header__subtitle {
			color: var( --color-primary-10 );
			margin-top: 1em;
			font-size: $font-body;
			line-height: 24px;
			font-weight: 400;
		}

		.jetpack-connect__authorize-form {
			margin-top: 32px;
		}

		.jetpack-logo__icon-circle {
			fill: var( --color-neutral-80 );
		}

		.jetpack-logo__icon-triangle {
			fill: var( --color-neutral-0 );
		}

		.signup-form__social p {
			color: var( --color-neutral-60 );
		}

		.formatted-header__title {
			color: var( --color-neutral-80 );
		}

		.signup-form__submit {
			border: 0;
			box-shadow: none;
		}

		.jetpack-header__partner-logo-plus svg {
			stroke: var( --color-neutral-80 );
		}

		.jetpack-header__partner-logo-plus .gridicon {
			color: var( --color-neutral-80 );
		}

		.jetpack-connect__main,
		.jetpack-connect__site.card,
		.logged-out-form,
		.jetpack-connect__logged-in-card.card {
			max-width: 476px;
		}

		.jetpack-connect__main {
			margin-left: auto;
			margin-right: auto;
		}

		.logged-out-form input:focus {
			border: 0;
			box-shadow: none;
		}

		.signup-form__terms-of-service-link,
		.signup-form__terms-of-service-link a {
			text-align: left;
			color: var( --color-neutral-60 );
		}

		.signup-form__terms-of-service-link a {
			text-decoration: underline;
		}

		.logged-out-form__links {
			max-width: 400px;
		}

		.logged-out-form__link-item {
			text-align: center;
			text-decoration: underline;
			color: var( --color-neutral-60 );
			font-size: $font-body-small;
		}

		.signup-form__social, .login__form-social {
			padding-bottom: 0;
			margin-top: 16px;
			p {
				font-size: $font-body-extra-small;
			}

			.signup-form__social-buttons-tos {
				color: var( --studio-gray-60 );
				margin-bottom: 16px;
				a {
					text-decoration: underline;
					color: var( --studio-gray-60 );
				}
			}

			.social-buttons__button {
				border: 1px solid var( --studio-pink-50 );
				color: var( --studio-pink-50 );
				box-shadow: none;
				max-width: 310px;
				height: 48px;
				margin-left: auto;
				margin-right: auto;
			}

			.card {
				padding: 0;
				box-shadow: none;
			}
		}

		.logged-out-form__footer, .login__form-footer {
			text-align: center;

			.button {
				max-width: 310px;
				margin-right: auto;
				margin-left: auto;
				height: 48px;
			}
		}

		.login__form-footer {
			margin-top: 24px;
		}

		.login__form {
			padding-top: 14px;
			border-radius: 3px;
			@include elevation( 2dp );
		}

		.login__form-change-username {
			display: none;
		}

		.jetpack-connect__logged-in-card button {
			border: 0;
			box-shadow: none;
		}

		.jetpack-connect__notices-container {
			margin-top: 20px;
		}

		.jetpack-connect__action-disclaimer {
			padding-top: 0;

			.jetpack-connect__tos-link,
			.jetpack-connect__tos-link a {
				color: var( --color-neutral-60 );
				font-size: $font-body-extra-small;
			}
		}

		.signup-form__woocommerce .card {
			padding-bottom: 0;
			padding-top: 8px;
		}

		.form-input-validation {
			padding-bottom: 0;
			padding-top: 0;
		}

		.woocommerce-muriel-text-control,
		.muriel-input-text {
			border-color: var( --color-neutral-20 );

			.components-base-control__label,
			.text-control__label {
				color: var( --color-neutral-50 );
			}

			&.active {
				box-shadow: 0 0 0 2px var( --studio-woocommerce-purple-60 );
				border-color: transparent;
			}
		}
	}

	&.is-jetpack-woo-dna-flow .login__form-header-wrapper {
		display: none;
	}
}

body.is-section-jetpack-connect .layout {
	&.is-jetpack-woocommerce-flow, &.is-jetpack-woo-dna-flow {
		.wpcom-site__logo {
			display: none;
		}
	}
}

.jetpack-connect__skip-button {
	text-align: center;
	margin: 17px 0;

	.button .gridicon {
		padding-left: 4px;
		margin-right: -5px;
	}
}

// ProductSelector and ProductCard overrides
.is-section-jetpack-connect .product-selector {
	max-width: 984px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 16px;
	padding-right: 16px;
}

.is-section-jetpack-connect .product-card {
	.product-card__header {
		padding: 12px 0;

		@include breakpoint-deprecated( '<660px' ) {
			padding: 16px 0;
		}
	}

	.product-card__header-primary {
		@include breakpoint-deprecated( '<660px' ) {
			justify-content: center;
		}
	}

	.product-card__title,
	.product-card__title:not( .is-purchased ) {
		font-size: $font-title-small;
		color: var( --color-neutral-70 );
	}

	.plan-price,
	.plan-price *,
	.product-card__billing-timeframe,
	.product-card__option .product-card__price-group .product-card__billing-timeframe {
		color: var( --color-neutral-70 );
		font-style: normal;
		vertical-align: baseline;

		@include breakpoint-deprecated( '>660px' ) {
			font-weight: 600;
		}
	}

	.plan-price.is-original,
	.plan-price.is-original * {
		color: var( --color-neutral-light );
	}

	.product-card__billing-timeframe {
		font-size: $font-body-small;
	}

	.product-card__header {
		.plan-price,
		.plan-price * {
			font-size: $font-body;
			line-height: 21px;
		}
	}

	.product-card__option-name {
		text-align: left;
	}
}
